<template>
	<div class="conn">
		<div class="login">
		</div>
		<div class="logos"><img src="../../assets/logos.png"></div>
		<div class="loginDiv">
			<img src="../../assets/ewm.jpg" class="ewm" />
			<div class="zy-login" v-if="isLogin">
				<p class="ti">项目征地验工计价管理平台</p>
				<div class="zy-title">用户登录</div>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
					<el-form-item prop="userName" class="tile">
						<span class="spans"><img src="../../../static/img/input-ico1.png"/></span>
						<input type="text" v-model="ruleForm.userName" placeholder="请输入用户名">
					</el-form-item>
					<el-form-item prop="pass" class="tile">
						<span class="spans"><img src="../../../static/img/input-ico2.png" /></span>
						<input type="password" v-model="ruleForm.pass" placeholder="请输入密码">
					</el-form-item>
					<el-form-item style="">
						<el-button type="primary" :loading="loadings" @click="submitForm('ruleForm')" style="width: 100%;height: 41px;">登入</el-button>
					</el-form-item>
				</el-form>
				<p class="ps">还没有账号？
					<a class="hovde" @click="regist()">注册</a>
				</p>
			</div>
			<div class="zy-login zy-res" v-else>
				<div class="zy-title zc-title">用户注册</div>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
					<el-form-item class="tile">
						<span class="spans"><img src="../../../static/img/input-ico1.png"/></span>
						<input type="text" v-model="regi.login" placeholder="请输入用户名">
					</el-form-item>
					<el-form-item class="tile">
						<span class="spans"><img src="../../../static/img/input-ico1.png"/></span>
						<input type="text" v-model="regi.name" placeholder="请输入姓名">
					</el-form-item>
					<el-form-item class="tile">
						<span class="spans"><img src="../../../static/img/input-ico2.png" /></span>
						<input type="password" v-model="regi.pass" placeholder="请输入密码">
					</el-form-item>
					<el-form-item class="tile">
						<span class="spans"><img src="../../../static/img/input-ico2.png" /></span>
						<input type="password" v-model="regi.repass" placeholder="请确认密码密码">
					</el-form-item>
					<el-form-item prop="pass" class="tile">
						<span class="spans spans1 el-icon-mobile-phone"></span>
						<input v-model="regi.tel" placeholder="请输入电话">
					</el-form-item>
					<el-form-item class="tile">
						<span class="spans spans1 el-icon-document"></span>
						<div class="sdd">
							<el-select v-model="regi.pro" placeholder="请选择工程项目" @change='change()'>
								<el-option v-for="item in proList" :key="item.ID" :label="item.Name" :value="item.ID">
								</el-option>
							</el-select>
						</div>
					</el-form-item>
					<el-form-item class="tile adds">
						<span class="spans spans1 el-icon-location-outline"></span>
						<div class="sdd">
							<el-cascader :options="regions" placeholder="请选择区域" v-model="form.region" separator='-' change-on-select filterable class="cascader" @change='cascader()'></el-cascader>
						</div>
					</el-form-item>
					<el-form-item class="tile adds">
						<span class="spans spans1 el-icon-info"></span>
						<div class="sdd">
							<el-select v-model="regi.types" placeholder="请选择账号类型">
								<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>
					</el-form-item>
					<el-form-item style="">
						<el-button type="primary" @click="register()" style="width: 100%;height: 41px;">注册</el-button>
					</el-form-item>
				</el-form>
				<p class="ps">已有账号？
					<a class="hovde" @click="Login()">登陆</a>
				</p>
			</div>
		</div>
		<!-- <p class="blink">好帮手测绘</p> -->
		<p class="copyRight">2018 QuickTech<br> Copyright © 征地好帮手测绘服务有限公司</p>
	</div>
</template>

<script>
	import api from "../../axios/api";
	export default {
		name: "login",
		data() {
			return {
				loadings: false,
				proList: [], //工程项目列表
				typeList: [{
						value: "2",
						label: "镇征拆"
					},
					{
						value: "3",
						label: "镇财务"
					},
					{
						value: "4",
						label: "县征拆"
					},
					{
						value: "5",
						label: "县财务"
					},
					{
						value: "6",
						label: "业主征拆"
					},
					{
						value: "7",
						label: "业主财务"
					},
					{
						value: "8",
						label: "领导通道"
					}
				],
				regi: {
					login: "", //登录名
					name: "", //姓名
					pass: "", //密码
					repass: "", //确认密码
					tel: "", //电话
					pro: "", //工程项目id
					types: "" //用户类型
				}, //用户注册变量
				form: {
					region: []
				}, //区域数据
				regions: [], //区域数据
				domain: [], //组合后的区域
				RegionID: "", //最后的区域
				isLogin: true,
				ruleForm: {
					userName: "",
					pass: ""
				},
				rules: {}
			};
		},
		created() {
			let me = this;
			document.onkeydown = function(event) {
				var e = event || window.event;
				if(e && e.keyCode == 13) { //回车键的键值为13
					if(me.isLogin) {
						me.submitForm()
					} else {
						me.register()
					}
				}
			};
			//获取项目
			this.getlistde()
		},
		methods: {
			//清空登录
			regist() {
				this.ruleForm.userName = "";
				this.ruleForm.pass = "";
				this.isLogin = false;
			},
			//清空注册
			Login() {
				this.regi.login = "";
				this.regi.name = "";
				this.regi.pass = "";
				this.regi.repass = "";
				this.regi.tel = "";
				this.regi.pro = this.proList[0] ? this.proList[0].ID : "";
				this.isLogin = true;
			},
			//用户注册
			register() {
				if(
					this.regi.login == "" ||
					this.regi.name == "" ||
					this.regi.pass == "" ||
					this.regi.tel == "" ||
					this.regi.types == "" ||
					this.RegionID == ""
				) {
					this.$message({
						message: "参数不能为空",
						type: "warning"
					});
					return;
				}
				if(this.regi.pass !== this.regi.repass) {
					this.$message({
						message: "两次密码不一样",
						type: "warning"
					});
					return;
				}
				this.$post(api.reguser, {
					Login: this.regi.login,
					CNName: this.regi.name,
					HeadIMG: "",
					Pwd: this.$md5(this.regi.pass),
					Tel: this.regi.tel,
					ProjectID: this.regi.pro,
					RegionID: this.RegionID,
					UserType: this.regi.types,
					State: 1
				}).then(response => {
					if(response.isOK == true && response.state == 200) {
						this.isLogin = true;
						this.$message({
							message: "注册成功",
							type: "success"
						});
					} else {
						this.$message.error("创建失败");
					}
				});
			},
			//获取项目
			getlistde() {
				this.$get(api.zList).then(response => {
					if(response.statusText == "OK" && response.status == 200) {
						this.proList = response.data;
						this.regi.pro = this.proList[0] ? this.proList[0].ID : "";
						this.anonymousget();
					} else {
						this.$message.error(response.msg);
					}
				});
			},
			//改变工程项目
			change() {
				this.regions = [];
				this.anonymousget();
			},
			//获取行政区域
			anonymousget() {
				this.$get(api.anonymousget + "/" + this.regi.pro).then(response => {
					if(response.data.isOK == true && response.data.state == 200) {
						for(var i = 0; i < response.data.Data.length; i++) {
							this.regions.push({
								label: response.data.Data[i].RegionName,
								value: response.data.Data[i].ID,
								ParentID: response.data.Data[i].ParentID
							});
						}
						this.regions = this.$toTree(this.regions);
					}
				});
			},
			//获取提交的行政区域id
			cascader() {
				this.RegionID = "";
				this.RegionID = this.form.region[this.form.region.length - 1];
			},
			//登录
			submitForm() {
				if(this.ruleForm.userName == "" || this.ruleForm.pass == "") {
					this.$message.error("用户名或密码不能为空");
					return;
				}
				this.loadings = true;
				this.$post(api.signin, {
					Login: this.ruleForm.userName,
					Pwd: this.$md5(this.ruleForm.pass)
				}).then(response => {
					if(response.isOK == true && response.state == 200) {
						sessionStorage.Login = response.Data.Login;
						sessionStorage.CNName = response.Data.CNName;
						sessionStorage.Token = response.Data.Token;
						sessionStorage.HeadIMG = response.Data.HeadIMG;
						sessionStorage.tel = response.Data.Tel;
						sessionStorage.id = response.Data.ID;
						sessionStorage.UserType = response.Data.UserType;
						sessionStorage.RegionID = response.Data.RegionID;
						sessionStorage.ProjectID = response.Data.ProjectID;
						//						this.$axios.defaults.headers.common['token'] = sessionStorage.Token
						this.$router.push({
							path: "/index"
						});
					} else {
						this.loadings = false;
						this.$message.error(response.msg);
					}
				});
			}
		}
	};
</script>

<style scoped>
	.logos {
		width: 350px;
		position: absolute;
		top: 15%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}
	
	.logos img {
		width: 80%;
	}
	
	.ewm {
		position: absolute;
		right: -260px;
		top:10%;
		width: 50%;
	}
	
	.conn {
		width: 100%;
		height: 100%;
	}
	
	.login {
		position: absolute;
		width: 100%;
		height: 100%;
		background: url(../../../static/img/login-bg.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 50% 0;
		z-index: -1;
	}
	
	.zy-title {
		line-height: 50px;
		font-size: 18px;
		color: #fff;
		padding: 5px 15px;
		text-align: center;
	}
	
	.zy-login {
		padding: 0 15px;
	}
	
	.ti {
		line-height: 50px !important;
		font-size: 20px !important;
		text-align: center;
		font-weight: 600;
		color: #ffffff;
	}
	
	.zy-login input,
	.zy-login select {
		-webkit-appearance: none;
		background-color: #fff;
		background-image: none;
		border-radius: 4px;
		border: 1px solid #dcdfe6;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		color: #606266;
		display: inline-block;
		font-size: inherit;
		height: 40px;
		line-height: 40px;
		outline: 0;
		padding: 0 50px;
		-webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		width: 100%;
	}
	
	.zy-login .el-form-item.is-required .el-form-item__label:before {
		color: #fff !important;
	}
	
	.el-form-item__content {
		margin-left: 0;
	}
	
	.zy-login p {
		font-size: 16px;
		line-height: 30px;
	}
	
	.ueselogin {
		color: #fff;
		line-height: 60px;
		text-align: center;
	}
	
	.loginDiv {
		z-index: 1000;
		background: url(../../../static/img/sl-0.png) repeat-x 0 0;
		background-size: auto 100%;
		min-height: 340px;
		border-radius: 6px;
		/*overflow: hidden;*/
		width: 350px;
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.tile {
		height: 60px !important;
		position: relative;
		margin-bottom: 25px;
	}
	
	.tile .el-input__inner {
		text-indent: 40px;
	}
	
	.tile .spans {
		position: absolute;
		left: 20px;
		top: 10px;
		z-index: 99;
		height: 18px;
		width: 18px;
		border-right: 1px solid #999;
	}
	
	.tile .spans img {
		position: absolute;
		height: 18px;
		width: 18px;
		left: -10px;
		top: 0px;
	}
	
	.tile .el-input__inner {
		height: 40px;
	}
	
	.copyRight {
		position: absolute;
		bottom: 30px;
		text-align: center;
		left: 50%;
		transform: translateX(-50%);
		color: #fff;
	}
	
	.ps {
		color: #fff;
	}
	
	.hovde {
		color: #fefefe;
		text-decoration: underline;
		cursor: pointer;
	}
	
	.spans1 {
		color: #cacaca;
		font-size: 20px;
		left: 10px !important;
		padding-right: 9px;
	}
	
	.adds {
		position: relative;
		z-index: 9999999;
	}
	
	.sdd {
		-webkit-appearance: none;
		background-color: #fff;
		background-image: none;
		border-radius: 4px;
		border: 1px solid #dcdfe6;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		color: #606266;
		display: inline-block;
		font-size: inherit;
		height: 40px;
		line-height: 40px;
		outline: 0;
		padding: 0 50px;
		-webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		width: 100%;
	}
	
	.sdd .el-cascader {
		width: 262px !important;
	}
	
	.cascader .el-input__inner {
		border: none !important;
		color: #606266;
		height: 40px !important;
	}
	
	.zc-title {
		line-height: 50px;
	}
	
	.zy-login .tile {
		height: 40px !important;
		margin-bottom: 20px !important;
	}
	
	.zy-res .tile {
		height: 40px !important;
		margin-bottom: 10px !important;
	}
	
	@keyframes blink {
		0% {
			opacity: 1;
		}
		50% {
			opacity: 1;
		}
		50.01% {
			opacity: 0;
		}
		/* 注意这里定义50.01%立刻透明度为０，可以设置闪烁效果 */
		100% {
			opacity: 0;
		}
	}
	/* 添加兼容性前缀 */
	
	@-webkit-keyframes blink {
		0% {
			opacity: 1;
		}
		50% {
			opacity: 1;
		}
		50.01% {
			opacity: 0;
		}
		100% {
			opacity: 0;
		}
	}
	
	@-moz-keyframes blink {
		0% {
			opacity: 1;
		}
		50% {
			opacity: 1;
		}
		50.01% {
			opacity: 0;
		}
		100% {
			opacity: 0;
		}
	}
	
	@-ms-keyframes blink {
		0% {
			opacity: 1;
		}
		50% {
			opacity: 1;
		}
		50.01% {
			opacity: 0;
		}
		100% {
			opacity: 0;
		}
	}
	
	@-o-keyframes blink {
		0% {
			opacity: 1;
		}
		50% {
			opacity: 1;
		}
		50.01% {
			opacity: 0;
		}
		100% {
			opacity: 0;
		}
	}
	/* 定义blink类*/
	
	.blink {
		animation: blink 0.75s linear infinite;
		/* 其它浏览器兼容性前缀 */
		-webkit-animation: blink 0.75s linear infinite;
		-moz-animation: blink 0.75s linear infinite;
		-ms-animation: blink 0.75s linear infinite;
		-o-animation: blink 0.75s linear infinite;
		color: #dd4814;
		position: absolute;
		bottom: 100px;
		text-align: center;
		left: 50%;
		transform: translateX(-50%);
		font-size: 25px;
	}
</style>